import React from 'react'
import PropTypes from 'prop-types'
import { Form, Button, Row, Col, Input } from 'antd'
import { PlusOutlined } from '@ant-design/icons'
import { CaseContext } from '../context'
import ClaimItem from './ClaimItem'
import style from './block.module.less'
import { download } from '@js/downloadRename'

const { List, Item } = Form
const { TextArea } = Input

// 添加按钮行
function AddBtnLine ({ fields, callback }) {
  return (
    <Row>
      {
        fields.length === 0 ? (
          <>
            <Col span={4} className={style['block-title']}><span>仲裁请求</span></Col>
            <Col span={2} />
          </>
        ) : (
          <Col span={6} />
        )
      }
      <Col span={10}>
        <Item label=' ' colon={false}>
          <Button type='dashed' onClick={() => callback()} style={{ width: '100%' }}>
            <PlusOutlined />
            <span>添加仲裁请求</span>
          </Button>
        </Item>
      </Col>
    </Row>
  )
}

// 渲染仲裁依据
function Basic ({ status }) {
  if (status !== '待审核') {
    return null
  }
  return (
    <Row>
      <Col span={4} className={style['block-title']}><span>仲裁依据</span></Col>
      <Col span={2} />
      <Col span={10}>
        <Item name='basis' label='仲裁依据'>
          <TextArea readOnly className={style['read-only']} />
        </Item>
      </Col>
    </Row>

  )
}

// 仲裁申请书
function ApplyFile ({ caseDetail }) {
  const claim = (caseDetail || {}).claim
  if (!claim) {
    return null
  }
  const file = claim.file || []
  if (file.length <= 0) {
    return null
  }
  return (
    <Row>
      <Col span={4} className={style['block-title']}><span>仲裁申请书</span></Col>
      <Col span={2} />
      <Col span={10}>
        <Item label='仲裁申请书'>
          <div className={style['file-list']}>
            {file.map((li, i) => {
              return (
                <span className={style.file} key={i}>
                  <a onClick={() => download(li.path, li.original_filename)} className={style['file-name']}>{li.original_filename}</a>
                </span>
              )
            })}
          </div>
        </Item>
      </Col>
    </Row>
  )
}

function Main ({ caseFormRef }) {
  return (
    <CaseContext.Consumer>
      {({ disabled, isModify, isPre, status, caseDetail }) => (
        <div>
          <Basic status={status} />
          <ApplyFile caseDetail={caseDetail} />
          <List name={['claim', 'items']}>
            {(fields, { add, remove }) => (
              <div>
                {
                  fields.map((field, i) => <ClaimItem key={field.name} field={field} index={i} len={fields.length} remove={remove} deleleAble={fields.length > 1} />)
                }
                {
                  !isModify && !disabled ? <AddBtnLine fields={fields} callback={add} /> : null
                }
              </div>
            )}
          </List>
          {!isPre ? (
            <Row>
              <Col span={6} />
              <Col span={10}>
                <Item label='事实与理由' name={['claim', 'statement']}>
                  <TextArea placeholder='请输入事实与理由' autoSize={{ minRows: 2 }} disabled={disabled} />
                </Item>
              </Col>
            </Row>
          ) : null}
        </div>
      )}
    </CaseContext.Consumer>
  )
}

Main.propTypes = {
  caseFormRef: PropTypes.object
}

Main.defaultProps = {
  caseFormRef: null
}

export default Main
